<template>
  <div class="login_page">
    <my-nav-bar title="登录">
      <van-cell-group>
        <van-form @submit="onSubmit">
          <van-field v-model="userName"
                     name="userName"
                     label="账号"
                     placeholder="用户名/邮箱地址"
                     :rules="[{required: true, message: '请输入用户名'}]"
          />
          <van-field v-model="passWord"
                     type="password"
                     name="passWord"
                     label="密码"
                     placeholder="密码"
                     :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field v-model:value="vifcode" name="vifCode" label="验证码" placeholder="请输入验证码">
            <template #right-icon>
              <img :src="img" @click="fetchCaptcha"/>
            </template>
          </van-field>
          <div class="submit_button">
            <van-button :disabled="isDisabled" round block type="info" native-type="submit" color="#7232DD">登录
            </van-button>
          </div>
        </van-form>
        <van-row class="test">
          <van-col span="8">
            <router-link tag="span" to="/registered">注册</router-link>
          </van-col>
          <van-col span="8"></van-col>
          <van-col span="8">
            <router-link tag="span" to="/retrieve">忘记密码？</router-link>
          </van-col>
        </van-row>
      </van-cell-group>
    </my-nav-bar>
  </div>
</template>

<script>
import {
  Field,
  NavBar,
  Col,
  Row,
  CellGroup,
  Button,
  Form,
  Toast
} from "vant"
import {Image as VanImage} from "vant"
import MyNavBar from "../../components/MyNavBar";
import {getCaptcha} from '@/api/captcha'

export default {
  name: "Login",
  components: {
    [Field.name]: Field,
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    VanImage,
    [Form.name]: Form,
    MyNavBar,
    Toast
  },
  data() {
    return {
      userName: "",
      passWord: "",
      vifcode: "",
      img: "",
      key: "",
      isDisabled: true,
    }
  },
  created() {
    this.initData();
  },
  beforeUpdate() {
    this.isDisabled = this.userName === "" || this.passWord === "" || this.vifcode === "";
  },
  methods: {
    async initData() {
      await this.fetchCaptcha();
    },
    // 获取 base64 格式验证码
    async fetchCaptcha() {
      const {data} = await getCaptcha()
      this.img = data.img;
      this.key = data.key;
    },
    onSubmit(values) {
      const data = {
        "code": this.vifcode,
        "key": this.key,
        "password": this.passWord,
        "username": this.userName
      }
      this.$store.dispatch("user/login", data)
        .then(() => {
          return this.$store.dispatch("user/getInfo");
        })
        .then(() => {
          Toast.success("登录成功");
          if (this.$route.query.redirect) {
            return this.$router.replace(this.$route.query.redirect);
          }
          this.$router.replace("/main/personal");
        })
        .catch(error => {
          console.log(error);
          setTimeout(function () {
            Toast.fail(error);
          }, 1000)
          this.fetchCaptcha();
        })
    }
  }
}
</script>

<style scoped>
.submit_button {
  margin: 5px 16px;
}

img {
  width: 100px;
  height: 30px;
}

.test {
  text-align: center;
  font-size: 10px;
  color: #B2B2B2;
}

::v-deep .van-field__label {
  align-items: center;
  display: flex;
}

.van-col--8 span {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>
